<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>

    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="common/js/common.js"></script>

</head>

<script type="text/javascript">
    // 页面加载时触发查询
    $(function () {
        queryAllDicType();

        // 查询所有字典类型
        function queryAllDicType() {
            // 发送异步请求
            $.ajax({
                // 地址
                url: "settings/dictionary/type/queryAllDicType.do",
                // 请求方式
                type: "get",
                // 请求成功返回信息
                success: function (data) {
                    // 判断返回的内容的状态码是否是1000//请求成功
                    if (data.code === 1000) {
                        // 控制台打印返回的内容
                        console.log(JSON.stringify(data))
                        // 字符串拼接 tbody 标签内部内容
                        var str = "";
                        $.each(data.body, function (index, object) {
                            str += "<tr >" // class="active"
                            str += "<td><input type=\"checkbox\" value=\"" + object.code + "\"/></td>"
                            str += "<td>" + (index + 1) + "</td>"
                            str += "<td>" + object.code + "</td>"
                            str += "<td>" + object.name + "</td>"
                            str += "<td>" + object.description + "</td>"
                            str += "</tr>"
                        });
                        // html：如果有值的话赋值，没有值则取值
                        $("#tBody").html(str);
                    } else {
                        // 打印错误信息
                        alert(data.magenta)
                    }
                }
            });
        }

        // 创建功能单击事件
        $("#createDicTypeBtn").on("click", function () {
            // 跳转新增页面
            window.location.href = "settings/dictionary/type/createDicTypePage.do";
        });

        // 编辑功能单击事件
        $("#editDicTypeBtn").on("click", function () {
            var checkboxs = $("#tBody input[type='checkbox']:checked");
            if (checkboxs.length != 1) {
                alert("只能编辑一个！")
                return
            }
            window.location.href = "settings/dictionary/type/updateDicTypePage.do?code=" + checkboxs.val();
        })

        // 删除功能单击事件
        $("#deleteDicTypeBtn").on("click", function () {
            var checkboxs = $("#tBody input[type='checkbox']:checked");
            if (checkboxs.length == 0) {
                alert("请选择需要删除的数据！")
                return
            }
            if (confirm("您确定要删除选中数据码？")){
                var codes = "";
                $.each(checkboxs, function (index, object) {
                    codes += "code=" + $(object).val() + "&";
                });
                codes = codes.substring(0, codes.length - 1);
                $.ajax({
                    url: "settings/dictionary/type/deleteDicType.do",
                    type: "post",
                    data: codes,
                    success: function (data) {
                        if (data.code === 1000) {
                            alert("删除成功！")
                            queryAllDicType();
                        } else {
                            alert(data.magenta)
                        }
                    }
                });
            }
        });




    });


</script>

<body>
<div>
    <div style="position: relative; left: 30px; top: -10px;">
        <div class="page-header">
            <h3>字典类型列表</h3>
        </div>
    </div>
</div>
<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;left: 30px;">
    <div class="btn-group" style="position: relative; top: 18%;">
        <button id="createDicTypeBtn" type="button" class="btn btn-primary"><span
                class="glyphicon glyphicon-plus"></span> 创建
        </button>
        <button id="editDicTypeBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-edit"></span>
            编辑
        </button>
        <button id="deleteDicTypeBtn" type="button" class="btn btn-danger"><span
                class="glyphicon glyphicon-minus"></span> 删除
        </button>
    </div>
</div>
<div style="position: relative; left: 30px; top: 20px;">
    <table class="table table-hover">
        <thead>
        <tr style="color: #B3B3B3;">
            <td><input type="checkbox" id="checkedAll"/></td>
            <td>序号</td>
            <td>编码</td>
            <td>名称</td>
            <td>描述</td>
        </tr>
        </thead>
        <tbody id="tBody">

        </tbody>
    </table>
</div>

</body>
</html>
